<!--suppress ALL -->
<template>
<div class="page maintain-page remainBuild-page" data-page="allBuild"
	style="z-index: 2">
	<div class="link-page-nav">
		<a href="#" class="link" @click=$root.backToTab()> <i
			class="iconfont icon-zuo"></i>
		</a>
	</div>
	<div class="link-page-top" style="padding-bottom: 17px;">
		<div class="link-page-title">建筑物</div>
	</div>
	<div class="page-content" id="allBuildList" style="overflow: hidden;">
		<div class="area-change">
			<a href="#" class="popover-close" @click="switchBuild"> <span
				id="levelName">某某楼栋</span> <i class="iconfont icon-APPicon_xiala"
				style="font-size: 14px;"></i>
			</a>
		</div>
		<div class="area-list  allBuild-level-task" id="areaList">
			<div class="area-list-left allBuild-level">
				<div class="area-list-content">
					<div style="height: 5%;"></div>
					<div class="area-list-data" id="floorList"></div>
					<div style="height: 5%;"></div>
				</div>
			</div>
			<div class="area-list-right allBuild-tsak" id="deviceList"></div>
		</div>
	</div>
</div>
</template>

<script>
	return {
		mounted() {

	    },
		data : function() {
			return {
				orgId:this.$route.params.organizationId,
				buildList:[],
			}
		},
		methods : {
			//获取楼栋信息
			getBuildList:function(){
				var self = this;
			    Dao.getFbsListByType({
			    	orgId: self.orgId,
			    	type:3,
			    	parentId:0,
			    },function(data){
			    	if(data&&data.length>0){
			    		self.buildList = data;
			    		$("#levelName").html(data[0].name);
			    		
			    		self.getFloorist(data[0].parentId);
			    	} else {
			    		$("#allBuildList").html(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
			    	}
			    });
			},
			
			// 切换楼栋
			switchBuild:function(){
				var self = this;
				debugger
				self.viewBuild(function(data){
					var parentId = data.parentId;
					self.getFloorist(parentId);
				});
			},			
			
			// 显示楼栋
			viewBuild:function(callback){
				var self = this;
				var data = self.buildList;
				var str = "";
				for(var i=0;i<data.length;i++){
					str += `<div class="rdsp-option-list rdsp-option-list-border all-level" data-index="`+i+`" data-id="`+data[i].parentId+`" data-name="`+data[i].name+`">
			         <span>`+data[i].name+`</span>
				     </div>`;
				}
				let html = `<div>`+str+`</div>`;
				openLayer(html,(el)=>{ 
					jQuery(".all-level").off().click(function(event) {
						var index = jQuery(event.currentTarget).attr("data-index");
						var id = jQuery(event.currentTarget).attr("data-id");
						var name = jQuery(event.currentTarget).attr("data-name");
						if(callback){
							callback({
								"index":index,
								"parentId": id,
								"fName": name,
							});  
				         }
						 layer.closeAll();
					});
				});
			},
			
			// 获取楼层
			getFloorist:function(parentId){
				debugger
				var self = this;
			    Dao.getFbsListByType({
			    	orgId: self.orgId,
			    	type:4,
			    	//parentId: 2173,
			    	parentId:parentId, 
			    },function(data){
			    	if(data&&data.length>0){
			    		$("#floorList").empty();
			    		
			    		for(var i=0;i<data.length;i++) {
			    			$("#floorList").append(`
			    					<div class="area-list-item">
									<input type="hidden" value="`+data[i].parentId+`"> <span>`+data[i].name+`</span>
								</div>
			    					`);
			    		}
			    		
			    		jQuery("#floorList .area-list-item").eq(0).addClass("area-list-item-active");
			    		jQuery("#floorList .area-list-item").eq(0).append(`<div class="all-build"></div>`);
			    		
			    		self.getDeviceList(data[0].parentId);
			    		
			    		// 切换楼层
			    		jQuery("#floorList .area-list-item").off().click(function(){
			    			var parentId = $(this).find("input").val();
			    			self.getDeviceList(parentId);
			    			
			    			$(".area-list-item.area-list-item-active").removeClass("area-list-item-active");
							$("#floorList .area-list-item .all-build").remove();
							$(this).addClass("area-list-item-active");  
							$(this).append(`<div class="all-build"></div>`);
			    		});
			    	} else {
			    		$("#areaList").html(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
			    	}
			    });
			},
			
			// 获取片区
			getDeviceList:function(parentId){
				var self = this;
			    Dao.getFbsListByType({
			    	orgId: self.orgId,
			    	type:5,
			    	//parentId:2176,
			    	parentId:parentId,
			    },function(data){
			    	jQuery("#deviceList").empty();
			    	if(data && data.length > 0){
			    		for(var i=0;i<data.length;i++) {
			    			$("#deviceList").append(`
			    					<div class="device-name-item">
			    					<span>`+data[i].name+`</span>
			    				    </div>	
			    					`);
			    		}
			    	} else {
			    		$("#deviceList").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
			    	}
			    });
			}
		},
		on : {
			pageInit : function(e, page) {
				var self = this;
				
				self.getBuildList();
			},
			pageAfterIn : function(e, page) {
				var self = this;
			},
		}
	}
</script>
<style scoped>
.all-build {
	width: 10px;
	height: 10px;
	background-color: #2471CA;
	margin-left: 47px;
	transform: rotate(40deg);
	position: relative;
	top: -25px;
}

.device-name-item {
	height: 50px;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(225, 225, 225, 1);
	border-radius: 6px;
	line-height: 50px;
	margin: 10px 0px;
}

.device-name-item span {
	padding-left: 5px;
}
</style>